﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>pageevents</title>
                                                            
    <!-- WinJSContrib.Core references -->
    <script src="./scripts/jquery-2.1.1.js"></script>
    <script src="./scripts/winjscontrib/jquery.mcnext.WinJS.js"></script>
    <script src="./scripts/winjscontrib/mcnext.ui.utils.js"></script>

    <link href="pageevents.css" rel="stylesheet" />
    <script src="pageevents.js"></script>
</head>
<body>
    <div class="pageevents fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">custom page events</span>
            </h1>
            <div class="codelink" data-codepage="./pages/core/pageevents/pageevents"><span class="symbol">&#xE160;</span><span class="text">show me the code !</span></div>
        </header>
        <section class="desc-screen" aria-label="Main content" role="main">
            <div class="bloc-description">
                <p>
                    The custom page navigator inject custom events in your pages.
                    Those events are intended to help you build pages in an efficient manner,
                    and to propagate those events to the controls on your page.
                    It helps building pages without having to rely heavily on WinJS Scheduler or setImmediate.
                </p>
                <p>
                    The custom event also enforce some best practice like scoping your selectors.
                </p>
            </div>
            <div></div>
            <div class="bloc-content">

                <h2>prepareData</h2>
                <p>
                    This is the very first event called on your page. It's even called before the previous page will be removed.
                    It's intended to start asynchronous data fetching.
                </p>
                <p>This event can return a promise that will be awaited before processing the pipeline.</p>
                <h2>prepare</h2>
                <p>
                    prepare is called while your page is off DOM and the previous page is showing it's exit animation.
                    This is the best step to add HTML and other DOM nodes
                    because you could be sure that it will not trigger costly engine steps like page layout or paint.
                </p>
                <p>
                    The page not beeing in DOM means that you have to scope selectors to the page root element.
                    It also means that layout properties on DOM nodes (like clientWidth) won't be filled.
                </p>
                <p>This event can return a promise that will be awaited before processing the pipeline.</p>
                <h2>layoutPage</h2>
                <p>
                    At this step the page was just added to the DOM.
                    This event is intended to receive code that could set or alter the layout of the elements.
                </p>
                <h2>ready</h2>
                <p>
                    this is the standard page ready event.
                </p>
                <h2>contentReady</h2>
                <p>When you get notified for this events, your page is on screen and the entry animation has completed.</p>
                <h2>exitPage</h2>
                <p>
                    The user has chosen to move away from the page. This event is called before the page is removed from screen.
                    It's your opportunity to save state based on elements on your page (like scroll position)
                </p>
                <p>At this step, you could also manage an exit animation and or return a promise to make the page navigator awaiting.</p>
                <h2>unload</h2>
                <p>Last step in the chain and last chance to do something on your page. It's the best place to release resources</p>
            </div>
        </section>
    </div>
</body>
</html>
